<template>
    <div class="accountRegistration">

        <div class="title">
            {{ $t('assemble.账号注册') }}
        </div>

        <div class="ZBox">
            {{ $t('assemble.注初次注册账号请使用公司公共邮箱地址注册以避免员工离职造成无法找回密码') }}
        </div>


        <div class="typeBox">
            <div class="itemType" @click="handlecompany">
                <img class="typeimg" src="../../static/imgs/gs.png">
                <div>{{ $t('assemble.公司账号') }}</div>
            </div>

            <div class="itemType" @click="handledepartment">
                <img class="typeimg" src="../../static/imgs/bm.png">
                <div>{{ $t('assemble.部门账号') }}</div>
            </div>

        </div>

    </div>
</template>
  
<script>

export default {
    data() {
        return {
            lang: 'zh',


        }
    },
    created() {

    },
    mounted() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')
    },
    methods: {
        handlecompany() {
            this.$router.push({ path: '/pages/login/company' })

        },
        handledepartment() {
            this.$router.push({ path: '/pages/login/department' })

        }
    },
}
</script>
  
<style scoped lang="scss">
.accountRegistration {
    @media screen and (max-width: 750px) {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 20px;
            color: #333333;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 70px;
            margin-left: 40px
        }

        .ZBox {
            width: 100%;
            padding: 40px 40px 0;
            box-sizing: border-box;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #B1B1B1;
            line-height: 14px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-top: 10px;
        }

        .typeBox {
            width: 100%;
            padding: 0 40px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 50px;

            .itemType {
                width: 140px;
                height: 140px;
                border-radius: 10px 10px 10px 10px;
                border: 1px solid #EDEDED;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 25px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;


                .typeimg {
                    width: 50px;
                    height: 50px;
                }
            }
        }

    }

    @media screen and (min-width: 751px) and (max-width: 1300px) {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28px;
            color: #333333;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 140px;
            margin-left: 80px
        }

        .ZBox {
            width: 100%;
            padding: 80px 80px 0;
            box-sizing: border-box;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            color: #B1B1B1;
            line-height: 20px;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-top: 20px;
        }

        .typeBox {
            width: 100%;
            padding: 0 150px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 100px;

            .itemType {
                width: 280px;
                height: 280px;
                border-radius: 10px 10px 10px 10px;
                border: 2px solid #EDEDED;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24px;
                color: #333333;
                line-height: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;


                .typeimg {
                    width: 150px;
                    height: 150px;
                }
            }
        }
    }

}
</style>
  